import { Alert, Tabs, TabItem } from '@aws-amplify/ui-react';
import AppDirectoryAlert from '@/components/AppDirectoryAlert';
import { Example, ExampleCode } from '@/components/Example';
import { BasicShoppingCard, AdvancedShoppingCard } from '../shared';
import { InstallScripts, TerminalCommand } from '@/components/InstallScripts.tsx';

## Tutorial

In this brief tutorial, we're going to build a basic shopping card component using [Next.js](https://nextjs.org/docs) and Amplify UI. Then, we'll elaborate on our shopping card to play with the possibilities of using Amplify UI.

### App Router
<AppDirectoryAlert/>

### Setup and Installation

First, execute the command below in your terminal. When prompted for the name of your project, enter `amplify-ui-demo`. 

<Tabs>
  <TabItem title="Pages Router (Next.js 11.0+)">
    <TerminalCommand command="npx create-next-app@latest amplify-ui-demo --no-app && cd amplify-ui-demo" />
  </TabItem>
  <TabItem title="App Router (Next.js 13.4+)">
    <TerminalCommand command="npx create-next-app@latest amplify-ui-demo && cd amplify-ui-demo" />
  </TabItem>
</Tabs>

Then, install the Amplify UI React package:

<InstallScripts framework="react" />

### Basic Demo

<Tabs>
  <TabItem title="Pages Router (Next.js 11.0+)">

Open up the project in your IDE and replace the contents of the `pages/index.js` with the code below:

  <Example>
    <ExampleCode>
    
  ```tsx file=./examples/BasicExampleCode.tsx
  ```

    </ExampleCode>
    <BasicShoppingCard />
  </Example>

  </TabItem>
    <TabItem title="App Router (Next.js 13.4+)">
    <Alert variation="info" role="none">
      Next.js 13.4+ introduced [app directory](https://nextjs.org/docs/app/building-your-application/routing#the-app-directory) with the usage of [Server Components](https://nextjs.org/docs/getting-started/react-essentials#server-components). In this guide we placed `"use client"` at the top of `page.jsx` to mark it as a Client Component.
    </Alert>

Open up the project in your IDE and replace the contents of the `app/page.jsx` with the code below:

    <Example>
      <ExampleCode>

```tsx file=./examples/UseClientBasicExampleCode.tsx
```

      </ExampleCode>
      <BasicShoppingCard />
    </Example>
  </TabItem>
</Tabs>

When you start the app (`npm run dev` or `yarn dev`), you should see a basic shopping card component.

### Advanced Demo

<Tabs>
  <TabItem title="Pages Router (Next.js 11.0+)">
If you’d like to play around with a more comprehensive demo of the Amplify UI library, create a separate file under the `pages` folder named `paintings.js`, and copy/paste this code into it:

    <ExampleCode>

```tsx file=./examples/paintings.ts
```

   </ExampleCode>

Then, replace the contents of `pages/index.js` with the code below, restart the app, and experience all the beautiful components in action!

    <Example>
      <ExampleCode>

```tsx file=./examples/AdvancedExampleCode.tsx
```

      </ExampleCode>
      <AdvancedShoppingCard />
    </Example>

  </TabItem>
  <TabItem title="App Router (Next.js 13.4+)">
  <Alert variation="info" role="none">
    Next.js 13.4+ introduced [app directory](https://nextjs.org/docs/app/building-your-application/routing#the-app-directory) with the usage of [Server Components](https://nextjs.org/docs/getting-started/react-essentials#server-components). In this guide we placed `"use client"` at the top of `page.jsx` to mark it as a Client Component.
  </Alert>
If you’d like to play around with a more comprehensive demo of the Amplify UI library, create a separate file under the `app` folder named `paintings.js`, and copy/paste this code into it:

    <ExampleCode>

```tsx file=./examples/paintings.ts
```

    </ExampleCode>

Then, replace the contents of `app/page.jsx` with the code below, restart the app, and experience all the beautiful components in action!

    <Example>
      <ExampleCode>

```tsx file=./examples/UseClientAdvancedExampleCode.tsx
```

      </ExampleCode>
      <AdvancedShoppingCard />
    </Example>
  </TabItem>
</Tabs>